---
permalink: /cv
---
<!DOCTYPE html>

<body>
  <!-- Explanation in JS tab -->

  <script type="text/javascript">
    function forward() {
      window.open("https://youdao.com/result?word=" + texts[(textIndex + 1) % texts.length] + "&lang=en")
    }
    document.onclick = forward;
  </script>
  <!-- The two texts -->
  <div id="container">
    <span id="text1"></span>
    <span id="text2"></span>
  </div>

  <!-- The SVG filter used to create the merging effect -->
  <svg id="filters">
    <defs>
      <filter id="threshold">
        <!-- Basically just a threshold effect - pixels with a high enough opacity are set to full opacity, and all other pixels are set to completely transparent. -->
        <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0
                       0 1 0 0 0
                       0 0 1 0 0
                       0 0 0 255 -140" />
      </filter>
    </defs>
  </svg>
</body>

<head>
  <title>Vocabulary Practise
  </title>
  <style>
    /* Explanation in JS tab */

    /* Cool font from Google Fonts! */
    @import url("https://fonts.googleapis.com/css?family=Merienda");

    html {
      height: 100%;
    }

    body {
      margin: 0px;
      height: 100%;
    }


    #container {
      /* Center the text in the viewport. */
      position: absolute;
      margin: auto;
      width: 100vw;
      height: 80pt;
      top: 0;
      bottom: 0;

      /* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
      filter: url(#threshold) blur(0.6px);
    }

    /* Your average text styling */
    #text1,
    #text2 {
      position: absolute;
      width: 100%;
      display: inline-block;
      font-family: "Merienda";
      font-size: 80pt;

      text-align: center;

      user-select: none;
    }
  </style>
  <script type="text/javascript">
    /*
    This pen cleverly utilizes SVG filters to create a "Morphing Text" effect. Essentially, it layers 2 text elements on top of each other, and blurs them depending on which text element should be more visible. Once the blurring is applied, both texts are fed through a threshold filter together, which produces the "gooey" effect. Check the CSS - Comment the #container rule's filter out to see how the blurring works!
         */

    const elts = {
      text1: document.getElementById("text1"),
      text2: document.getElementById("text2")
    };

    // The strings to morph between. You can change these to anything you want!
    texts = [
      "overturning",
      "radical",
      "American Civil War",
      "Independence War",
      "colonize",
      "veto",
      "election",
      "ideology",
      "centralized",
      "metropolitan",
      "system",
      "federal",
      "anarchism",
      "monarchy",
      "seed-bearing plant",
      "seed",
      "symbiosis",
      "photosynthesis",
      "wither",
      "pollinate",
      "pollen",
      "petals",
      "rose",
      "petal",
      "bud",
      "flower",
      "bush",
      "shrub",
      "prairie",
      "meadow",
      "lawn",
      "bark",
      "branch",
      "trunk",
      "sprout",
      "shoot",
      "blade",
      "leafstalk",
      "stem",
      "leaflet",
      "leaf",
      "foliage",
      "canopy",
      "root",
      "botanist",
      "botany",
      "parasite",
      "microbe",
      "hatch",
      "breed",
      "homeotherm",
      "polyandrous",
      "polygamous",
      "monogamous",
      "flock",
      "swarm",
      "herd",
      "mollusk",
      "rodent",
      "prey",
      "predator",
      "predatory",
      "carnivorous",
      "herbivorous",
      "omnivorous",
      "insect",
      "mammal",
      "amphibian",
      "reptile",
      "aquatic",
      "vertebrate",
      "invertebrate",
      "cyclone",
      "tornado",
      "hurricane",
      "typhoon",
      "whirlwind",
      "gale",
      "breeze",
      "avalanche",
      "blizzard",
      "hail",
      "shower",
      "drizzle",
      "storm",
      "tempest",
      "downpour",
      "smog",
      "mist",
      "fog",
      "frost",
      "saturate",
      "humid",
      "moist",
      "wet",
      "damp",
      "evaporate",
      "vapor",
      "current",
      "climate",
      "forecast",
      "meteorologist",
      "statistics",
      "probability",
      "function",
      "integral calculus",
      "differential calculus",
      "calculus",
      "radius",
      "diameter",
      "circumference",
      "cone",
      "ellipse",
      "circle",
      "sphere",
      "volume",
      "cube",
      "polygon",
      "rectangle",
      "area",
      "angle",
      "triangle",
      "square",
      "quadrilateral",
      "geometric",
      "geometry",
      "formula",
      "equation",
      "algebra",
      "digit",
      "fraction",
      "aggregate",
      "calculator",
      "calculation",
      "arithmetic",
      "mathematician",
      "mathematics",
      "sewage disposal",
      "sewage purification",
      "sewage",
      "solid waste",
      "fumes",
      "noxious",
      "pollutant",
      "air/water/noise/soil pollution",
      "pollution control",
      "pollution",
      "ozonosphere",
      "ozone layer",
      "ultraviolet radiation",
      "infrared radiation",
      "greenhouse effect",
      "rain",
      "acid",
      "effloresce",
      "flora",
      "fauna",
      "ecosystem",
      "ecologist",
      "vacuum tube",
      "electron tube",
      "chip",
      "circulate",
      "integrated circuit",
      "semiconductor",
      "insulator",
      "conductor",
      "magnet",
      "magnetism",
      "electric current",
      "static electricity",
      "electricity",
      "supersonic",
      "resonance",
      "ultrasonic",
      "echo",
      "gravity",
      "gravitation",
      "inertia",
      "equilibrium",
      "acceleration",
      "velocity",
      "myopia",
      "optics",
      "acoustics",
      "mechanics",
      "physics",
      "dissolve",
      "solution",
      "hydrocarbon",
      "compound",
      "table",
      "periodic",
      "substance",
      "alchemy",
      "chemistry",
      "Iron Age",
      "Bronze Age",
      "Stone Age",
      "antique",
      "relic",
      "artifact",
      "remains",
      "ruins",
      "unearth",
      "excavate",
      "excavation",
      "archeologist",
      "progeny",
      "descendant",
      "coheir",
      "heir",
      "inherit",
      "hereditary",
      "hierarchy",
      "patriarchy",
      "matriarchy",
      "monogamous",
      "heterogeneous",
      "homogeneous",
      "indigenous",
      "genealogy",
      "ethnogeny",
      "genesis",
      "generate",
      "primate",
      "primitive",
      "primary",
      "forefather",
      "ancestor",
      "primogenitor",
      "originate",
      "origin",
      "baboon",
      "orangutan",
      "gorilla",
      "chimpanzee",
      "ape",
      "anthropoid",
      "anthropologist",
      "anthropology",
      "volcanic",
      "eruption",
      "volcano",
      "dormant",
      "volcano",
      "extinct",
      "volcano",
      "active",
      "volcano",
      "epoch",
      "glacial",
      "glacial",
      "glacier",
      "iceberg",
      "deposit",
      "ore",
      "mineral",
      "magma",
      "granite",
      "marble",
      "limestone",
      "quartz",
      "rock",
      "metamorphic",
      "rock",
      "sedimentary",
      "ignite",
      "rock",
      "igneous",
      "erode",
      "erosion",
      "plate",
      "stratum",
      "layer",
      "core",
      "mantle",
      "crust",
      "geologist",
      "geology",
      "peninsula",
      "cape",
      "delta",
      "islet",
      "island",
      "subterranean",
      "terrain",
      "cave",
      "cavern",
      "canyon",
      "valley",
      "ranges",
      "continental",
      "continent",
      "basin",
      "lowland",
      "plateau",
      "plain",
      "geomorphology",
      "Antarctic",
      "Arctic",
      "latitude",
      "longitude",
      "equator",
      "horizon",
      "parallel",
      "meridian",
      "geographer",
      "geography",
      "interplanetary",
      "interstellar",
      "intergalactic",
      "stellar",
      "star",
      "illuminate",
      "luminary",
      "luminous",
      "circumlunar",
      "lunar",
      "meteoroid",
      "meteorite",
      "meteor",
      "radiation",
      "solar",
      "eclipse",
      "solar",
      "system",
      "solar",
      "solar",
      "cosmic",
      "cosmology",
      "cosmos",
      "timorous ",
      "intimidation",
      "intimidate",
      "timidity",
      "timid",
      "amateur",
      "amatory",
      "amity",
      "amicable",
      "amiable",
      "supersede",
      "subsidence",
      "subside",
      "insidious",
      "assiduous",
      "residue",
      "residence",
      "resident",
      "reside",
      "president",
      "preside",
      "photosynthesis",
      "photography",
      "nonflammable",
      "inflammable",
      "flammable",
      "inflame",
      "flamboyant",
      "flame",
      "candidate",
      "candor",
      "candid",
      "candle",
      "omniscient",
      "unconscious",
      "consciousness",
      "conscious",
      "conscientious",
      "conscience",
      "scientific",
      "science",
      "precipitation",
      "precipitate",
      "capitalist",
      "capitalism",
      "capital",
      "cape",
      "asteroid",
      "asterisk",
      "catastrophic",
      "catastrophe",
      "disastrous",
      "disaster",
      "astrophysicist",
      "astrophysics",
      "astrology",
      "astronomy",
      "subterranean",
      "terrestrial",
      "extraterrestrial",
      "terrace",
      "terrain",
      "Mediterranean",
      "territorial",
      "territory",
      "astronaut",
      "circumnavigate",
      "navigator",
      "navigation",
      "navigate",
      "naval",
      "navy",
      "maritime",
      "mariculture",
      "aquamarine",
      "submarine",
      "marine",
      "heterogeneous",
      "homogeneous",
      "congenial",
      "genre",
      "genus",
      "indigenous",
      "progeny",
      "primogenitor",
      "engender",
      "eugenics",
      "gender",
      "degenerate",
      "generator",
      "generation",
      "generate",
      "genius",
      "gene",
      "philanthropist",
      "philanthropy",
      "anthropoid",
      "anthropologist",
      "anthropology",
      "dehumanize",
      "humanitarianism",
      "humanitarian",
      "predominant",
      "predominate",
      "dominance",
      "dominate",
      "domesticate",
      "domestic",
      "dome",
      "monarchy",
      "matriarchy",
      "patriarchy",
      "hierarchy",
      "archaic",
      "archeologist",
      "archeology",
      "architect",
      "architecture",
      "Arctic",
      "archer",
      "arcade",
      "archway",
      "arch",
      "snooze",
      "snore",
      "sneeze",
      "sniffle",
      "sniff",
      "myopic",
      "myopia",
      "optometrist",
      "optics",
      "optical",
      "optic",
      "wade",
      "pervasive",
      "pervade",
      "inevitable",
      "evasion",
      "evade",
      "invasion",
      "invader",
      "invade",
      "excess",
      "exceed",
      "process",
      "proceed",
      "unprecedented",
      "preceding",
      "precede",
      "semiconductor",
      "conductor",
      "conduct",
      "reduce",
      "reproduce",
      "production",
      "product",
      "produce",
      "induce",
      "education",
      "rodenticide",
      "herbicide",
      "pesticide",
      "suicide",
      "homicide",
      "concise",
      "precision",
      "precise",
      "incise",
      "decisive",
      "decide",
      "propeller",
      "propulsion",
      "propel",
      "repel",
      "impel",
      "compulsory",
      "compelling",
      "compel",
      "expulsion",
      "expel",
      "suppress",
      "repress",
      "depression",
      "depress",
      "compress",
      "impressive",
      "impress",
      "expressive",
      "expression",
      "express",
      "distract",
      "subtract",
      "abstract",
      "extraction",
      "extract",
      "retraction",
      "retract",
      "protract",
      "contract",
      "attractive",
      "attract",
      "tractor",
      "词根tract",
      "deposit",
      "predispose",
      "disposal",
      "disposable",
      "dispose",
      "proposal",
      "propose",
      "opposition",
      "opposite",
      "oppose",
      "decomposition",
      "decompose",
      "composition",
      "composer",
      "compose",
      "exposure",
      "exposition",
      "expose",
      "imposition",
      "impose",
      "pose",
      "interject",
      "objection",
      "objective",
      "object",
      "inject",
      "subject",
      "ejection",
      "eject",
      "projector",
      "projection",
      "project",
      "reject",
      "contradictory",
      "contradiction",
      "unpredictable",
      "prediction",
      "predict",
      "addict",
      "dictate",
      "dictation",
      "denounce",
      "announcement",
      "announce",
      "pronounce",
      "controversy",
      "controversial",
      "conversely",
      "converse",
      "convert",
      "advertiser",
      "advertisement",
      "advertise",
      "diversion",
      "divert",
      "diversification",
      "diversify",
      "diversity",
      "diverse",
      "irreversible",
      "reverse",
      "universal",
      "universe",
      "circumvent",
      "contravention",
      "contravene",
      "intervene",
      "intervention",
      "prevention",
      "prevent",
      "conventional",
      "convention",
      "adventurous",
      "adventure",
      "advent",
      "expiration",
      "expire",
      "aspiration",
      "aspire",
      "conspire",
      "respiratory",
      "respiration",
      "respire",
      "inspiration",
      "inspire",
      "spirit",
      "devise",
      "improvise",
      "envisage",
      "evident",
      "supervisor",
      "supervision",
      "supervise",
      "revise",
      "visual",
      "visit",
      "conspicuous",
      "speculate",
      "specimen",
      "introspection",
      "inspect",
      "expect",
      "respect",
      "prospect",
      "spectator",
      "circumstance",
      "obstacle",
      "contrast",
      "establish",
      "stabilize",
      "stable",
      "institute",
      "constitution",
      "constitute",
      "consist",
      "resistant",
      "resist",
      "existing",
      "existence",
      "exist",
      "persistent",
      "persist",
      "insist",
      "submit",
      "omit",
      "commitment",
      "commit",
      "admission",
      "admit",
      "emit",
      "promise",
      "dismiss",
      "missile",
      "transfer",
      "inference",
      "infer",
      "suffer",
      "differentiate",
      "difference",
      "different",
      "differ",
      "preferable",
      "preferential",
      "prefer",
      "deferment",
      "deference",
      "defer",
      "interference",
      "interfere",
      "referee",
      "reference",
      "refer",
      "offer",
      "emancipate",
      "capture",
      "misconception",
      "concept",
      "conception",
      "conceive",
      "deceptive",
      "deception",
      "deceive",
      "perceptive",
      "perception",
      "perceive",
      "accept",
      "receive",
      "weaken",
      "lengthen",
      "widen",
      "deepen",
      "gratify",
      "clarify",
      "purify",
      "globalize",
      "modernize",
      "realize",
      "circulate",
      "create",
      "graduate",
      "enormous",
      "dangerous",
      "famous",
      "proposal",
      "refusal",
      "traditional",
      "national",
      "natural",
      "historical",
      "historic",
      "economical",
      "economic",
      "confident",
      "different",
      "significant",
      "massive",
      "impressive",
      "creative",
      "quantifiable",
      "incredible",
      "acceptable",
      "reasonable",
      "aluminum",
      "millennium",
      "auditorium",
      "museum",
      "gallery",
      "bakery",
      "dictionary",
      "factory",
      "scholarship",
      "relationship",
      "friendship",
      "package",
      "shortage",
      "marriage",
      "description",
      "communication",
      "action",
      "advertisement",
      "entertainment",
      "development",
      "security",
      "safety",
      "ability",
      "privacy",
      "emergence",
      "emergency",
      "appearance",
      "applicant",
      "servant",
      "assistant",
      "tourist",
      "scientist",
      "dentist",
      "librarian",
      "magician",
      "American",
      "elevator",
      "consumer",
      "ruler",
      "cooker",
      "radar",
      "scholar",
      "actor",
      "singer",
      "corroborate",
      "collaborate",
      "combat",
      "consumption",
      "concentrate",
      "consist",
      "disadvantage",
      "disclose",
      "disappear",
      "unlock",
      "unfortunate",
      "unfair",
      "Mediterranean",
      "immediately",
      "midnight",
      "midday",
      "interfere",
      "interval",
      "interact",
      "resentful",
      "resent",
      "reverberate",
      "rejuvenate",
      "reduce",
      "reject",
      "return",
      "postpone",
      "postgraduate",
      "post-war",
      "foresee",
      "foretell",
      "forecast",
      "prominent",
      "proliferate",
      "promote",
      "proprolong",
      "prescription",
      "prejudice",
      "president",
      "emigrate",
      "elect",
      "exploit",
      "express",
      "exit",
      "imprison",
      "immigrate",
      "import",
      "injector",
      "inject",
      "innermost",
      "interior",
      "income",
      "include",
      "underline",
      "underwear",
      "underunderground",
      "sustain",
      "suffer",
      "succeed",
      "subtropical",
      "submarine",
      "suburb",
      "subway",
      "depend",
      "decrease",
      "decline",
      "overestimate",
      "overlook",
      "overcome",
      "overall",
      "supreme",
      "superb",
      "superior",
      "surmount",
      "surface"
    ];
    // Controls the speed of morphing.
    const morphTime = 0.75;
    const cooldownTime = 3;

    let textIndex = texts.length - 1;
    let time = new Date();
    let morph = 0;
    let cooldown = cooldownTime;

    elts.text1.textContent = texts[textIndex % texts.length];
    elts.text2.textContent = texts[(textIndex + 1) % texts.length];

    function doMorph() {
      morph -= cooldown;
      cooldown = 0;

      let fraction = morph / morphTime;

      if (fraction > 1) {
        cooldown = cooldownTime;
        fraction = 1;
      }

      setMorph(fraction);
    }

    // A lot of the magic happens here, this is what applies the blur filter to the text.
    function setMorph(fraction) {
      // fraction = Math.cos(fraction * Math.PI) / -2 + .5;

      elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
      elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

      fraction = 1 - fraction;
      elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
      elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

      elts.text1.textContent = texts[textIndex % texts.length];
      elts.text2.textContent = texts[(textIndex + 1) % texts.length];
    }

    function doCooldown() {
      morph = 0;

      elts.text2.style.filter = "";
      elts.text2.style.opacity = "100%";

      elts.text1.style.filter = "";
      elts.text1.style.opacity = "0%";
    }

    // Animation loop, which is called every frame.
    function animate() {
      requestAnimationFrame(animate);

      let newTime = new Date();
      let shouldIncrementIndex = cooldown > 0;
      let dt = (newTime - time) / 1000;
      time = newTime;

      cooldown -= dt;

      if (cooldown <= 0) {
        if (shouldIncrementIndex) {
          textIndex++;
        }
        doMorph();
      } else {
        doCooldown();
      }
    }

    // Start the animation.
    animate();
  </script>
</head>